<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="icon" href="img/favicon.ico" type="image/x-icon">
	<title>跑跑卡丁车随机地图</title>
	<!-- <link href="css/pop.css?ver=202008021405" rel="stylesheet" type="text/css" /> -->
	<!-- css 文件 -->
	<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">

	<!-- jQuery 库 -->
	<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

	<!-- JavaScript 文件 -->
	<script src="https://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>

	<!-- modernizr.js 文件 -->
	<script src="https://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>
	<script type=text/javascript src="js/popkart.js?ver=202008082356"></script>


</head>

<body style="padding:0px 20px">
	<div id="top_bar_id">
	<ul class="tabs" data-tab="">
		<li class="tab-title active"><a href="#home">首页</a></li>
		<li class="tab-title"><a href="#menu1">禁图</a></li>
		<li class="tab-title"><a href="#menu2">关于</a></li>
	</ul>
</div>
	<div class="tabs-content">
		<div class="content active" id="home">
			<div id="mode_btn" style="display:none">
				<a href="javascript:void(0)" data-dropdown="mode_ul_id" class="button dropdown">选择难度</a>
				<ul id="mode_ul_id" data-dropdown-content class="f-dropdown">
					<li><a href="javascript:void(0)" onclick="on_mode('easy')">钻石难度</a></li>
					<li><a href="javascript:void(0)" onclick="on_mode('normal')">王者难度</a></li>
					<li><a href="javascript:void(0)" onclick="on_mode('hard')">车神难度</a></li>
					<li><a href="javascript:void(0)" onclick="on_mode('hell')">没了头发专属难度</a></li>
					<li><a href="javascript:void(0)" onclick="on_mode('all')">全地图</a></li>
					<li><a href="javascript:void(0)" onclick="on_mode('item')">道具模式</a></li>
				</ul>
			</div>
			<div id="main_btn" style="display:none">
				<ul class="button-group">
					<li><button type="button" class="button" onclick="on_next()">随机一个赛道</button></li>
					<li><button type="button" class="button" onclick="on_reset()">重置赛道</button></li>
				</ul>


			</div>
			<p>下一张地图:<span id="next_map_id" style="color:red;"></span></p>
			<!-- <div class="panel">
				<h2>可选地图:</h2>
					<ul id="allow_map_id" class="no-bullet"></ul>
			  </div> -->
			  <ol class="accordion" data-accordion>
				<li class="accordion-navigation">
				  <a href="#allow_map_id"><h2>可选地图(点击展开):</h2></a>
				  <div id="allow_map_id" class="content active">
				  </div>
				</li>
			  </ol>
			  <ol class="accordion" data-accordion>
				<li class="accordion-navigation">
				  <a href="#selected_map_id"><h2>已选地图(点击展开):</h2></a>
				  <div id="selected_map_id" class="content">
				  </div>
				</li>
			  </ol>

		</div>
		<div class="content" id="menu1">
			<fieldset class="large-7 cell">
				<legend>已经禁用的地图</legend>
				<ul id="banned_list_id" class="no-bullet"></ul>
				<button type="button" class="button" onclick="on_del_ban_btn()">取消禁用</button>
		</fieldset>
			<fieldset class="large-7 cell">
				<legend>请选择你想禁用的地图</legend>
				<ul id="ban_list_id" class="no-bullet"></ul>
			<button type="button" class="button" onclick="on_ban_btn()">禁用</button>
		</fieldset>
		
		</div>
		<div class="content" id="menu2">
			<p>
				<span>本功能由仓鼠设计实现，非典型美化，图库由</span>
				<img class="emojiSvg"
					src=""
					unicode16="1f300" alt="">
				<span>泡神</span>
				<span>和</span>
				<img class="emojiSvg"
					src=""
					unicode16="1f3c0" alt="">
				<span>坤坤提供: </span>
				<a href="data/maps.json" target="_blank">查看图库</a>
				<a href="data/probability.json" target="_blank">查看概率</a>
			</p>
			<p>关于禁图功能，禁用的图将永远不会出现在随机到的地图池中，因此当禁用过多时可能会影响总地图数</p>
		</div>
	</div>

</body>
<script>$(document).ready(function () {
	$(document).foundation();
});
</script>
</html>